<template>
  <div class="block">
    <el-date-picker
        v-model="date"
        align="right"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
    </el-date-picker>
    <el-time-select
        v-model="time"
        style="margin-left: 10px"
        :picker-options="{
          start: '00:00',
          step: '00:15',
          end: '23:59'
        }"
        value-format="hh:mm"
        placeholder="选择时间">
    </el-time-select>
    <el-button type="primary"  style="margin-left: 30px" @click="onSubmit" :disabled="disabled">查询</el-button>
    <el-button type="primary"  style="margin-left: 30px" @click="reset" >重置</el-button>
  </div>
</template>

<script>
export default {
  name: "DateTime",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      date: null,
      time: null,
    };
  },
  methods: {
    onSubmit() {
      const _this = this
      this.$store.commit('setDate',_this.date)
      this.$store.commit('setTime',_this.time)
    },
    reset() {
      const _this = this
      _this.date=null
      _this.time=null
      this.$store.commit('setDate',null)
      this.$store.commit('setTime',null)
    },
  },
  computed:{
    disabled(){
      const _this = this
      if (_this.date==null || _this.time==null){
        return true
      } else {
        return false
      }
    },
  },
  watch:{
    $route: {
      immediate: true, // 一旦监听到路由的变化立即执行
      handler(to, from) {
        this.$store.commit('setDate',null)
        this.$store.commit('setTime',null)
      },
    },
  }

}
</script>

<style scoped>
.block{
  width: 1000px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 20px;
  opacity: 0.97;
}

</style>